<template>
  <div class="com_page">

    <!-- 顶部信息 开始 -->
    <div class="top_info">

      <!-- 左侧 开始 -->
      <div class="left_info">

        <!-- 姓名、头像 开始 -->
        <div class="name_box">
          <div class="city">{{baseInfo.cityName&&baseInfo.cityName.length>2?baseInfo.cityName.slice(0,2):baseInfo.cityName}}</div>
          <div class="">
            <div class="name">
              <span>{{userInfo.name}}</span>
              <img src="@/assets/images/male.png" alt="" v-if="userInfo.gender == '男' || userInfo.gender == 1" />
              <img src="@/assets/images/female.png" alt="" v-else-if="userInfo.gender == '女' || userInfo.gender == 2">
              <img src="@/assets/images/unknown.png" alt="" v-else>
              <img src="@/assets/images/star.png" alt="" v-if="baseInfo.markTag == 2">
              <img src="@/assets/images/loss.png" alt="" v-if="baseInfo.markTag == 4">
              <img src="@/assets/images/invalid.png" alt="" v-if="baseInfo.markTag == 3">
            </div>
            <div class="mobile">
              {{userInfo.phone}}
            </div>
          </div>
        </div>
        <!-- 姓名、头像 end -->

        <!-- 信息列表 开始 -->
        <div class="info_list">
          <div class="cell">
            <div class="name">负责人：</div>
            <div class="txt">{{userInfo.principalNames}}</div>
          </div>
          <div class="cell">
            <div class="name">客户状态：</div>
            <div class="txt">{{userInfo.statusDesc}}</div>
          </div>
          <div class="cell">
            <div class="name">创建时间：</div>
            <div class="txt">{{userInfo.createdDate}}</div>
          </div>
          <div class="cell">
            <div class="name">更新时间：</div>
            <div class="txt">{{userInfo.updatedDate}}</div>
          </div>
        </div>
        <!-- 信息列表 end -->

      </div>
      <!-- 左侧 end -->

      <!-- 右侧统计 开始 -->
      <div class="right_info">
        <div class="cell">
          <div class="title">总成交金额</div>
          <div class="txt">{{userInfo.totalDealAmount}} <span>元</span></div>
        </div>
        <div class="cell">
          <div class="title">总收款金额</div>
          <div class="txt">{{userInfo.totalCollectAmount}} <span>元</span></div>
        </div>
        <div class="cell">
          <div class="title">欠款金额</div>
          <div class="txt">{{userInfo.debtAmount}} <span>元</span></div>
        </div>
        <div class="cell">
          <div class="title">退款金额</div>
          <div class="txt">{{userInfo.refundAmount}} <span>元</span></div>
        </div>
      </div>
      <!-- 右侧统计 end -->

    </div>
    <!-- 顶部信息 end -->

    <!-- tab菜单 开始 -->
    <div class="tabs_box">
      <div class="tabs_list">
        <div class="tags_head">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基础信息" name="1">
            </el-tab-pane>
            <el-tab-pane label="跟进信息" name="2">
            </el-tab-pane>
            <el-tab-pane label="预约信息" name="3">
            </el-tab-pane>
            <el-tab-pane label="成交信息" name="4">
            </el-tab-pane>
            <el-tab-pane label="回访信息" name="6">
            </el-tab-pane>
            <el-tab-pane label="变更信息" name="5">
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="tags_box">
          <tag-select v-model="userInfo.tags" @change="saveTagInfo" class="tag_select"></tag-select>
        </div>
      </div>
      <div class="tabs_content">
        <base-info :userInfo="userInfo" v-if="activeName == 1"></base-info>
        <follow-info :userInfo="userInfo" v-if="activeName == 2"></follow-info>
        <book-info :userInfo="userInfo" v-if="activeName == 3"></book-info>
        <deal-info :userInfo="userInfo" v-if="activeName == 4"></deal-info>
        <visit-info :userInfo="userInfo" v-if="activeName == 6"></visit-info>
        <modify-info :userInfo="userInfo" v-if="activeName == 5"></modify-info>
      </div>

    </div>
    <!-- tab菜单 end -->

  </div>
</template>
<script>
import { GETCUSTOMERINFO, SAVE_CUSTOMER_TAG } from "@/http/customer";
import BaseInfo from "./base";
import FollowInfo from "./follow";
import BookInfo from "./bookInfo";
import DealInfo from "./dealInfo";
import ModifyInfo from "./modify";
import VisitInfo from "./visit";
import { showToast } from "@/common/util";
export default {
  name: "CustomerDetail",
  components: {
    BaseInfo,
    FollowInfo,
    BookInfo,
    DealInfo,
    ModifyInfo,
    VisitInfo,
  },
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      activeName: "1",
      userInfo: {},
      baseInfo: {},
      customerTags: "",
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 获取用户详情
    getInfo() {
      let _this = this;
      let oParams = { id: _this.id };
      GETCUSTOMERINFO(oParams).then((res) => {
        let obj = res.data || {};
        _this.userInfo = obj;
        _this.baseInfo = obj.baseInfo ? obj.baseInfo : {};
      });
    },

    // 打标签
    saveTagInfo(e) {
      console.log(e);
      let id = this.userInfo.customerId;
      let oParams = {
        id: id,
        tag: e,
        type: 0,
      };
      SAVE_CUSTOMER_TAG(oParams).then((res) => {
        if (res.code == 200) {
          showToast({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.top_info {
  display: flex;
  align-items: flex-start;
  .left_info {
    position: relative;
    flex: 1.5;
    display: flex;
    .info_list {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .cell {
        flex: 0 0 50%;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #323233;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
      }
    }
  }
  .left_info:after {
    display: block;
    content: "";
    width: 1px;
    background: #e2e3e5;
    position: absolute;
    top: 10px;
    right: 0;
    bottom: 10px;
  }
  .right_info {
    flex: 1;
    display: flex;
    padding-left: 40px;
    .cell {
      flex: 0 0 25%;
      .title {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #323233;
        margin-bottom: 16px;
      }
      .txt {
        font-size: 20px;
        font-family: DIN-Medium, DIN;
        font-weight: 500;
        color: #323233;
        span {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

.name_box {
  display: flex;
  //align-items: center;
  padding-right: 16px;
  .city {
    min-width: 32px;
    height: 32px;
    background: #167fff;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 32px;
    margin-right: 7px;
  }
  .name {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #167fff;
    margin-bottom: 7px;
    img {
      width: 16px;
      height: 16px;
      margin-left: 7px;
    }
  }
  .mobile {
    font-size: 12px;
    font-family: DIN-Regular, DIN;
    font-weight: 400;
    color: #999999;
  }
}
.tabs_list {
  position: relative;
  display: flex;
  .tags_head {
    ::v-deep .el-tabs__header {
      margin: 0;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }
    ::v-deep .el-tabs__active-bar {
      z-index: 3;
    }
  }
  .tags_box {
    padding-left: 20px;
    .a_select {
      margin: 0;
      padding: 0;
    }
  }
}
.tabs_content {
  padding-top: 15px;
}
.tabs_list:after {
  display: block;
  content: "";
  height: 2px;
  background: #e4e7ed;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.tag_select{
  ::v-deep .el-select{
    width:140px;
    .el-input__inner{
      border:1px solid #ff8f2e;
    }
  }
}
</style>